<template>
  <div class="search-resultbox">
    <div class="header">
      <div class="flexbox">
        <div class="return" @click.stop="tosearch">
          <i class="iconfont icon-zuo"></i>
        </div>
        <div class="textbox">
          <i class="iconfont icon-sousuo"></i>
          <input type="search" v-model="result" @focus="foucusFun" @keypress.13="reserch" ref="inp" />
        </div>
      </div>
      <div class="tab"></div>
    </div>
    <div class="suggest" v-show="suggestshow">
      <ul>
        <li v-for="(ele,index) in suggest" :key="index" @click.stop="hotsearch(ele.keyword)">
          <i class="iconfont icon-sousuo"></i>
          <div>{{ele.keyword}}</div>
        </li>
        <li v-show="suggest==undefined" class="none">搜索&nbsp;“{{result}}”</li>
      </ul>
    </div>
    <div class="content" v-show="!suggestshow">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="listitem" v-for="(ele,index) in list" :key="index" @click.stop="clickSearchListFun(ele)">
          <div class="van-ellipsis">{{ele.name}}</div>
          <div class="bottom">
            <div class="van-ellipsis">{{ele.artists[0].name}}</div>
            <div class="center">-</div>
            <div class="van-ellipsis">{{ele.album.name}}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { searchresult } from "../assets/api/search.js";
import { searchSuggest } from "../assets/api/search.js";
export default {
  data() {
    return {
      suggestshow: false,
      result: "",
      list: [],
      loading: false,
      finished: false,
      offset: 0,
      suggest: [],
    };
  },
  methods: {
    hotsearch(result) {
      this.result = result;
      console.log(this.result);
      this.reserch();
      this.suggestshow = false;
    },
    reserch() {
      this.offset = 0;
      this.list = [];
      this.onLoad();
      this.$refs.inp.blur();
      this.suggestshow = false;
      console.log(this.list);
    },
    clickSearchListFun(item){
        this.$emit("click-search-list-funson",item);
    },
    //搜索框获得焦点
    foucusFun() {
      this.suggestshow = true;
    },
    // 回到搜索页面
    tosearch() {
      this.$router.push({ name: "search" });
    },
    //滑到底部加载事件
    onLoad() {
      searchresult({
        type: 1,
        keywords: this.result,
        offset: this.offset,
      }).then((data) => {
        if (data.result.songCount != 0) {
          data.result.songs.forEach((ele) => {
            this.list.push(ele);
          });
        }
        this.loading = false;
        if (this.list.length >= data.result.songCount) {
          this.finished = true;
        }
      });
      this.offset += 1;
    },
  },
  watch: {
    result(newV) {
      if (newV == "") {
        return;
      }
      searchSuggest({ keywords: newV, type: "mobile" }).then((data) => {
        this.suggest = data.result.allMatch;
      });
    },
  },

  created() {
    this.result = this.$route.params.result;
    this.loading = true;
    this.onLoad();
  },
};
</script>

<style lang="less">
.search-resultbox {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.9);
  position: fixed;
  left: 0;
  top: 0;
  .header {
    background-color: rgba(0, 0, 0, 0.01);
    height: 88px;
    backdrop-filter: blur(20px);
    background-blend-mode: multiply;
    box-sizing: border-box;
    padding: 49px 15px 0 15px;
    padding-bottom: 5px;
    .flexbox {
      display: flex;
      align-items: center;
      .return {
        i {
          font-size: 22px;
        }
      }
      .textbox {
        margin-left: 23px;
        flex: 1;
        position: relative;
        i {
          color: rgba(255, 255, 255, 0.6);
          position: absolute;
          margin: auto;
          top: 0;
          bottom: 0;
          width: 14px;
          height: 14px;
          font-size: 14px;
          left: 14px;
        }
        input {
          box-sizing: border-box;
          width: 100%;
          border: none;
          border-radius: 10000px;
          background-color: rgba(255, 255, 255, 0.135);
          height: 35px;
          padding: 0px 36px;
          line-height: 35px;
          &::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.3);
          }
          &::-webkit-search-cancel-button {
            display: none;
          }
        }
      }
      .cancelbox {
        font-size: 17px;
      }
    }
  }
  .suggest {
    ul {
      li {
        display: flex;
        height: 41px;
        line-height: 41px;
        padding: 0 15px;
        font-size: 14px;
        &.none {
          color: #8baccb;
        }
        i {
          color: rgba(255, 255, 255, 0.5);
          margin-right: 8px;
          font-size: 14px;
        }
        div {
          flex: 1;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
  .content {
    .van-list {
      padding: 0 15px;
      margin-top: 10px;
      padding-bottom: 67px;
      .listitem {
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 15px;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        .bottom {
          display: flex;
          margin-top: 10px;
          font-size: 12px;
          letter-spacing: 0;
          color: rgba(255, 255, 255, 0.6);
          .center {
            margin: 0 3px;
          }
        }
      }
    }
  }
}
</style>